<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-08-26 14:57:33
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-09-20 09:58:58
 * @FilePath: \orderApp\packageOne\pages\personalInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
  },
}
</route>

<template>
  <view class="">
    <cu-navbar title="我的预订"></cu-navbar>
    <cu-slider :list="reservatInfo" :height="offsetTop" contentColor="#fff">
      <template v-slot:default="{ data, index }">
        <view class="content" :style="{ '--height': offsetTop + 'px' }">
          <view class="flex flex-items-center">
            <p class="tabName">
              {{ data.name }}
            </p>
            <view class="flex flex-items-center" v-if="index" @click="open">
              <p class="timeBox color-#111">
                {{ data.dateList[0].day }} 至 {{ data.dateList[6].day }}
              </p>
              <uv-icon name="arrow-down-fill" color="#111111" size="30rpx"></uv-icon>
            </view>
            <p class="timeBox" v-else>
              ({{ data.dateList[0].day }}—{{ data.dateList[6].day }})
            </p>
          </view>
          <view class="flex mainBox" :style="{ marginBottom: 30 + bottom + 'px' }">
            <view class="left flex">
              <view
                v-for="(item, idx) in data.dateList"
                :key="idx"
                class="cu-flex weekItem"
              >
                <span>{{ item.week }}</span>
                <span class="day">{{ dayjs(item.day).format("MM-DD") }}</span>
              </view>
            </view>
            <view class="right">
              <view class="cu-flex mealBox">
                <view class="center flex-col">
                  <view class="flex">
                    <uv-icon
                      name="tianchong_fuben"
                      custom-prefix="custom-icon"
                      size="38rpx"
                      color="#006241"
                    ></uv-icon>
                    <span class="color-#006241" style="font-size: 27rpx">早餐</span>
                  </view>
                  <!-- <span class="color-#969799" style="font-size: 23rpx; margin-top: 4rpx">
                  已预定{{ data.reservatList[dateIdx]?.breakfastSum }}人
                </span> -->
                </view>
                <view class="center flex-col">
                  <view class="flex">
                    <uv-icon
                      name="tianchong"
                      custom-prefix="custom-icon"
                      size="38rpx"
                      color="#006241"
                    ></uv-icon>
                    <span class="color-#006241" style="font-size: 27rpx">中餐</span>
                  </view>
                  <!-- <span class="color-#969799" style="font-size: 23rpx; margin-top: 4rpx">
                  已预定{{ curWeekData[dateIdx]?.lunchSum }}人
                </span> -->
                </view>
                <view class="center flex-col">
                  <view class="flex">
                    <uv-icon
                      name="tianchong_fuben2"
                      custom-prefix="custom-icon"
                      size="38rpx"
                      color="#006241"
                    ></uv-icon>
                    <span class="color-#006241" style="font-size: 27rpx">晚餐</span>
                  </view>
                  <!-- <span class="color-#969799" style="font-size: 23rpx; margin-top: 4rpx">
                  已预定{{ curWeekData[dateIdx]?.dinnerSum }}人
                </span> -->
                </view>
              </view>

              <view class="mealContent flex">
                <view>
                  <view
                    v-for="(item, index) in data.reservatList"
                    :key="index"
                    class="contentItem"
                  >
                    <cu-checkbox :isCheck="item.breakfast" :disabled="true"></cu-checkbox>
                  </view>
                </view>
                <view>
                  <view
                    v-for="(item, index) in data.reservatList"
                    :key="index"
                    class="contentItem"
                  >
                    <cu-checkbox :isCheck="item.lunch" :disabled="true"></cu-checkbox>
                  </view>
                </view>
                <view>
                  <view
                    v-for="(item, index) in data.reservatList"
                    :key="index"
                    class="contentItem"
                  >
                    <cu-checkbox :isCheck="item.dinner" :disabled="true"></cu-checkbox>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </cu-slider>

    <calendarsPop
      ref="calendarRef"
      :endDate="endDate"
      :defaultDate="defaultDate"
      @changeTime="changeTime"
    ></calendarsPop>
  </view>
</template>

<script lang="ts" setup>
//
import calendarsPop from "./components/calendarsPop.vue";
import { getMyTheMeal } from "@/service/business/login";
import { useUserStore } from "@/store";
import { getWeekDate, getAnyWeek } from "@/utils/time";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

const offsetTop = ref(useUserStore().pinia_SafeVal.top + 44);
const bottom = ref(useUserStore().pinia_SafeVal.bottom);
const { user } = useUserStore().userInfo;

const weeksOrigin = () => [
  { week: "周一", day: "" },
  { week: "周二", day: "" },
  { week: "周三", day: "" },
  { week: "周四", day: "" },
  { week: "周五", day: "" },
  { week: "周六", day: "" },
  { week: "周日", day: "" },
];
const reservatInfo = reactive([
  {
    name: "本周",
    id: 0,
    dateList: weeksOrigin(),
    reservatList: [],
  },
  {
    name: "历史",
    id: 1,
    dateList: weeksOrigin(),
    reservatList: [],
  },
]);

// 日历默认时间范围
const defaultDate = ref([]);
// 日历禁用范围
const endDate = ref("");
// 设置预定时间
const getTime = () => {
  // 本周时间
  let curWeek = getWeekDate("current", "YYYY-MM-DD");
  reservatInfo[0].dateList.forEach((el, index) => {
    el.day = curWeek[index];
  });

  // 历史日期默认给上周
  let historyWeek = getWeekDate("last", "YYYY-MM-DD");
  reservatInfo[1].dateList.forEach((el, index) => {
    el.day = historyWeek[index];
  });
  defaultDate.value = [reservatInfo[1].dateList[0].day, reservatInfo[1].dateList[6].day];
  endDate.value = reservatInfo[1].dateList[6].day;
};

// 切换历史的查询时间
const changeTime = (week) => {
  reservatInfo[1].dateList.forEach((el, index) => {
    el.day = week[index];
  });
  let params = {
    userId: user.userId,
    beginDate: week[0],
    endDate: week[6],
  };
  getMyTheMeal(params).then((res) => {
    if (res.retCode == 2000) {
      reservatInfo[1].reservatList = res.data;
    }
  });
  defaultDate.value = [week[0],week[6]]
};

// 请求预定信息
const reqMyTheMeal = () => {
  reservatInfo.forEach((el) => {
    let params = {
      userId: user.userId,
      beginDate: el.dateList[0].day,
      endDate: el.dateList[6].day,
    };
    getMyTheMeal(params).then((res) => {
      if (res.retCode == 2000) {
        el.reservatList = res.data;
      }
    });
  });
};

const calendarRef = ref(null);
const open = () => {
  calendarRef.value.open();
};

onMounted(() => {
  getTime();
  reqMyTheMeal();
});
</script>

<style lang="scss" scoped>
//
.content {
  display: inline-block;
  width: calc(100% - 30.77rpx);
  height: calc(100vh - var(--height) - 216.92rpx);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.tabName {
  font-weight: 600;
  font-size: 31rpx;
  color: #111111;
  line-height: 46rpx;
  margin-right: 12rpx;
}

.timeBox {
  font-size: 27rpx;
  color: #969799;
}

.mainBox {
  flex: 1;
  // margin-bottom: ;
  .left {
    width: 115rpx;
    height: 100%;
    padding-top: 96rpx;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-around;
    .weekItem {
      flex-direction: column;
      width: 100%;
      height: 12%;
      font-weight: 600;
      font-size: 23rpx;
      color: #323233;
      line-height: 38rpx;
      background: #eeeef0;

      border-radius: 8rpx;
      .day {
        font-weight: 400;
        color: #969799;
      }
    }
    .weekAct {
      background: #00754a;
      color: #fff;
      .day {
        color: #fff;
      }
    }
  }
  .right {
    flex: 1;
    padding-left: 31rpx;
    .mealBox {
      height: 96rpx;
      flex: 1;

      view {
        flex: 1;
        justify-content: space-around;
      }
    }

    .mealContent {
      height: calc(100% - 96rpx);
      justify-content: space-around;
      & > view {
        height: 100%;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: space-around;
      }
    }
  }
}
</style>
